<template>
  <div>
    <Button type="primary" @click="$router.push('/admin/addbanner')" style="margin-bottom:20px;">添加新banner</Button>
    <Table :columns="columns" :data="bannerData"></Table>
    <Modal v-model="bannerModal" width="550">
      <p slot="header">
        <span>Banner详情</span>
      </p>
      <div style="text-align:left;font-size: 14px;">
        <p><strong>banner名称：</strong><span>{{modalData.name}}</span></p>
        <Divider />
        <p><strong>简介：</strong><span>{{modalData.desc}}</span></p>
        <Divider />
        <p><strong>链接URL：</strong><span>{{modalData.imgurl}}</span></p>
        <Divider />
        <p><strong>图：</strong><img :src="modalData.imgurl" style="width: 100%;" /></p>
        <Divider />
        <p><strong>状态：</strong><span>{{modalData.status == 1 ? '正常' : '关闭'}}</span></p>
        <Divider />
        <p><strong>更新时间：</strong><span>{{modalData.datetime}}</span></p>
      </div>
      <div slot="footer">
        <Button type="success" @click="bannerModal=false">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  layout: "admin",
  data() {
    return {
      columns: [
        {
          title: "#",
          type: "index"
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "简介",
          key: "desc"
        },
        {
          title: "链接地址",
          key: "imgurl"
        },
        {
          title: "状态",
          render: (h, param) => {
            const text = param.row.status == 1 ? '正常' : '关闭'
            const color = param.row.status == 1 ? 'success' : 'error'
            return h('Tag', {
              props: {
                color: color
              }
            }, text)
          }
        },
        {
          title: "操作",
          render: (h, param) => {
            return h("Button", {
              props: {
                type: "primary"
              },
              on: {
                click: () => {
                  this.modalData = param.row
                  this.bannerModal = true
                }
              }
            }, '查看详情');
          }
        }
      ],
      bannerData: [],
      modalData: {
        name: '',
        desc: '',
        imgurl: '',
        datetime: '',
        status: ''
      },
      bannerModal: false
    };
  },
  methods: {
    getList(url, _this) {
      _this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          _this.bannerData = res.data.detail
        } else {
          _this.$Message.error('获取列表失败，请稍后重试！')
        }
      }).catch(err => {
        _this.$Message.error('网络错误，请稍后重试！')
      })
    }
  },
  mounted() {
    const url = '/adminapi/getBannerList'
    this.$options.methods.getList(url, this)
  }
};
</script>
